<!DOCTYPE html>
<html>

<head>
    <title>extrudeline test</title>
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.97.0/build/three.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script>
    <script type="text/javascript" src="../dist/maptalks.three.js"></script>
    <script type="text/javascript" src="buildings.js"></script>
    <style>
        html,
        body {
            margin: 0px;
            height: 100%;
            width: 100%;
        }

        #map {
            width: 100%;
            height: 700px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new maptalks.Map("map", {
            center: [13.416935229170008, 52.529564137540376],
            zoom: 15,
            pitch: 70,
            bearing: 180,
            centerCross: true,
            doubleClickZoom: false,
            baseLayer: new maptalks.TileLayer('tile', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c', 'd'],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        });
        // features to draw
        var features = [];
        buildings.forEach(function (b) {
            features = features.concat(b.features);
        });
        // the ThreeLayer to draw buildings
        var threeLayer = new maptalks.ThreeLayer('t', {
            forceRenderOnMoving: true,
            forceRenderOnRotating: true
        });
        threeLayer.prepareToDraw = function (gl, scene, camera) {
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);
            var material = new THREE.MeshBasicMaterial({ color: '#3e35cf' });
            // material.vertexColors = THREE.VertexColors;
            var meshs = [];
            features.forEach(function (g) {
                var heightPerLevel = 10;
                var levels = g.properties.levels || 1;
                var mesh = threeLayer.toExtrudePolygon(maptalks.GeoJSON.toGeometry(g), {
                    height: heightPerLevel * levels,
                    topColor: '#fff'
                }, material);
                // initVertexColors(mesh.geometry, '#2d2f61', '#fff');
                meshs.push(mesh);
                // if (Array.isArray(mesh)) {
                //     scene.add.apply(scene, mesh);
                // } else {
                //     scene.add(mesh);
                // }
            });
            threeLayer.addMesh(meshs);
            addLines();
            addEvents();
        };
        threeLayer.addTo(map);


        function addLines() {
            fetch('./data/berlin-roads.txt').then(function (res) {
                return res.text();
            }).then(function (geojson) {
                geojson = LZString.decompressFromBase64(geojson);
                geojson = JSON.parse(geojson);
                var material = new THREE.MeshPhongMaterial({ color: 0x00ffff });
                var lineStrings = maptalks.GeoJSON.toGeometry(geojson);
                var timer = 'generate line time';
                console.time(timer);
                var lines = lineStrings.map(function (lineString) {
                    return threeLayer.toExtrudeLine(lineString, { altitude: 0, width: 3, height: 1 }, material);
                });
                console.log('lines.length:', lines.length);
                console.timeEnd(timer);
                threeLayer.addMesh(lines);
            })
        }

        function addEvents() {
            map.on('mousemove', function (e) {
                map.resetCursor('default');
                var objects = threeLayer.identify(e.coordinate, { count: 2 });
                console.log(objects);
                if (objects.length) {
                    map.setCursor(`pointer`);
                }
            })
        }
    </script>
</body>

</html>